<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{$t('user.PersonalMessage')}}</span>
          </div>
          <div>
            <div class="text-center">
              <div class="user-info-head" @click="handleAvatar">
                <img v-bind:src="$store.getters.avatar" :title="$t('user.UploadHeadPortrait')"
                  class="img-circle img-lg" />
              </div>
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />{{$t('user.Username')}}
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />{{$t('user.Phone')}}
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />{{$t('user.Email')}}
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />{{$t('user.Department')}}
                <div class="pull-right" v-if="user.dept">{{ user.dept.name }}</div>
              </li>
              <!-- <li class="list-group-item">
                <svg-icon icon-class="peoples" />{{$t('user.Role')}}
                <div class="pull-right">{{ roleGroup }}</div>
              </li> -->
              <li class="list-group-item">
                <svg-icon icon-class="date" />{{$t('user.CreateTime')}}
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card style="max-width:500px;">
          <div slot="header" class="clearfix">
            <span>{{$t('user.BasicInformation')}}</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane :label="$t('user.BasicInformation')" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane :label="$t('user.ChangePassword')" name="password">
              <change-password />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <avatar-editor-dialog ref="avatarDialog" />
  </div>
</template>

<script>
  import AvatarEditorDialog from '@/components/Avatar/AvatarEditorDialog.vue';
  import userInfo from "./userInfo";
  import ChangePassword from "./ChangePassword";
  import {
    getUserProfile,
    uploadAvatar
  } from "@/api/system/user-profile";

  export default {
    name: "Profile",
    components: {
      userInfo,
      ChangePassword,
      AvatarEditorDialog
    },
    data() {
      return {
        user: {},
        // roleGroup: {},
        activeTab: "userinfo"
      };
    },
    created() {
      this.loadData();
    },
    methods: {
      loadData() {
        getUserProfile().then(response => {
          this.user = response.data;
          // this.roleGroup = response.roleGroup;
        });
      },
      saveAvatar(data) {
        const vm = this
        let formData = new FormData();
        formData.append("file", data);
        uploadAvatar(formData).then((res) => {
          vm.$store.commit("SET_AVATAR", res.imgUrl);
          vm.$modal.msgSuccess(vm.$t("ModifySuccessful"));
          vm.$refs['avatarDialog'].close();
        });
      },
      handleAvatar() {
        this.$refs['avatarDialog'].show(this.$store.getters.avatar, this.saveAvatar)
      }
    }
  };

</script>
<style scoped>
  .user-info-head {
    position: relative;
    display: inline-block;
    height: 120px;
  }

  .user-info-head:hover:after {
    content: "+";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #eee;
    background: rgba(0, 0, 0, 0.5);
    font-size: 24px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
    line-height: 110px;
    border-radius: 50%;
  }

</style>
